﻿@page "/VideoPlayers"
@namespace BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<VideoPlayers> Localizer

<h3>@Localizer["Title"]</h3>

<PackageTips Name="BootstrapBlazor.VideoPlayer" />

<Tips>
    <p>@((MarkupString)Localizer["Tips"].Value)</p>
</Tips>
<DemoBlock Title="@Localizer["BaseUsageText"]" Introduction="@Localizer["BaseUsageIntro"]" Name="Nomal">
    <div class="row g-3">
        <div class="col-6">
            <VideoPlayer MineType="application/x-mpegURL" Url="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" />
        </div>
        <div class="col-6">
            <VideoPlayer MineType="video/mp4" Url="//vjs.zencdn.net/v/oceans.mp4" />
        </div>
    </div>

</DemoBlock>

<DemoBlock Title="@Localizer["BaseUsageText2"]" Introduction="@Localizer["BaseUsageIntro2"]" Name="Nomal">

    <div class="row g-3">
        <div class="col-6 col-sm-6 col-md-3 col-xl-auto">
            <Dropdown TValue="string" Items="Items" OnSelectedItemChanged="@ChangeURL" />
        </div>
        <div class="col-6 col-sm-6 col-md-6  col-xl-auto">
            <BootstrapInput @bind-Value="@Url" />
        </div>
        <div class="col-6 col-sm-6 col-md-4 col-xl-auto">
            <BootstrapInput @bind-Value="@MineType" />
        </div>
        <div class="col-6 col-sm-6 col-md-2 col-xl-auto">
            <Button Color="Color.Primary" OnClick="Apply">加载</Button>
        </div>
    </div>
    <br />
    <VideoPlayer @ref="Player" MineType="@MineType" Url="@Url" Width="500" Height="380" />

</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
<br />
<h5>MineType 类型</h5>
<ol>
    <li>opus: 'video/ogg'</li>
    <li>ogv: 'video/ogg'</li>
    <li>mp4: 'video/mp4'</li>
    <li>mov: 'video/mp4'</li>
    <li>m4v: 'video/mp4'</li>
    <li>mkv: 'video/x-matroska'</li>
    <li>m4a: 'audio/mp4'</li>
    <li>mp3: 'audio/mpeg'</li>
    <li>aac: 'audio/aac'</li>
    <li>caf: 'audio/x-caf'</li>
    <li>flac: 'audio/flac'</li>
    <li>oga: 'audio/ogg'</li>
    <li>wav: 'audio/wav'</li>
    <li>m3u8: 'application/x-mpegURL'</li>
    <li>mpd: 'application/dash+xml'</li>
    <li>jpg: 'image/jpeg'</li>
    <li>jpeg: 'image/jpeg'</li>
    <li>gif: 'image/gif'</li>
    <li>png: 'image/png'</li>
    <li>svg: 'image/svg+xml'</li>
    <li>webp: 'image/webp'</li>
</ol>
